<template>
  <div class="dynamic-box">
    <div class="search-bar">
      <img class="arrow" @click="goback" src="@/assets/arrow/XO.png" />
      <div class="title">动态</div>
    </div>

    <div class="master-list" v-for="d in data" :key="d.id">
      <div class="comment">
        <input type="text" placeholder="添加评论" />
        <div class="comment-item">
          <div @click="$router.push('/comment/' + d.id)" class="comment_count"><img class="comment_count-img" src="@/assets/goImages/uh.png" />{{ d.comment_count }}</div>
          <div @click="changeHeart(d)" class="like_count">
                        <img v-if="d.heart" class="like_count-img" src="@/assets/goImages/g1.png" />

            <img v-else class="like_count-img" src="@/assets/goImages/T_.png" />
            
          {{ d.like_count }}</div>
          <div class="collection" @click="collectionFeed">
            <img  v-if="!collection" class="collection-img" src="@/assets/goImages/oK.png" />
                        <img  v-else class="collection-img" src="@/assets/goImages/9j.png" />

            收藏</div>
        </div>
      </div>

      <div class="master-list-content">
        <div class="imgbox">
          <img @click="$router.push('/authorcenter/' +  d.id)" class="master-avatar_thumbnail" :src="d.send_user.avatar_thumbnail" />
          <img v-if="d.send_user.account_icon_url" class="account_icon_url" :src="d.send_user.account_icon_url" />
          <div class="master-name">{{ d.send_user.name }}</div>
        </div>

        <img class="preferred" :src="d.badge_url" />
        <div v-if="!clickFo" @click="clickFollow" class="follow">+关注</div>
                <div v-else @click="clickflw" class="follow">已关注</div>

      </div>

      <div class="pics-box">
        <div class="pics" v-for="(p, index) in d.pics" :key="p.id">
          <img @click="previewImg(d.pics, index)" class="pics-img" v-lazy="p.url" />
        </div>
        <div class="text-box">
          <div class="title">{{ d.title }}</div>
          <div class="content">{{ d.content }}</div>

          <div v-if="d.subjects" class="title-box">
            <div class="title" v-for="t in d.subjects" :key="t.id">
              <img src="@/assets/goImages/sJ.png" />
              {{ t.title }}
            </div>
          </div>
          <div class="address-box">
            <div class="address"  @click="$router.push('/businesses/' + d.business.id)"><img class="icon" src="@/assets/goImages/u0.png" alt="" />{{ d.business.city }}.{{ d.business.name }}</div>
          </div>
        </div>
        <div class="shop-box">
          <div class="shop-content" v-if="d.feed">
            <img class="shop-img" :src="d.feed?.covers[0].url" />
            <div class="shop-item">
              <div class="shop-name">{{ d.feed?.tiny_title }}</div>
              <div class="reason_text">"{{ d.feed?.reason_text }}"</div>
              <div class="shop-text">
                <div class="time">{{ d.feed?.time }}</div>
                <div class="collection">{{ d.feed?.likes }}人收藏</div>
              </div>
            </div>
          </div>
          <div class="browse-box">
            <div class="browse">{{ d.feed?.view_count }}浏览</div>
            <div class="release-time">{{ date(d?.timestamp) }}发布</div>
          </div>
        </div>
      </div>

      <div v-if="d.comment_count !== 0" class="comment-box">
        <div class="pop-name">评论({{ d.comment_count }})</div>
        <div class="comment-content">
          <div class="comment-text" v-for="c in comment[0]" :key="c.id">
            <img class="head-img" :src="c.from_user.avatar_thumbnail" />
            <div class="text-box">
              <div class="user-name">{{ c.from_user.name }}：{{ c.content }}</div>
              <div class="time">{{ date(d.timestamp) }}</div>
            </div>
          </div>
        </div>
        <div @click="$router.push('/comment/' + d.id)" class="more-comment">查看更多评论></div>
      </div>
    </div>

    <div class="relevant-box">
      <div class="relevant-title">相关推荐</div>



   <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh" :canFresh='true'>
        <template #list>

      <div class="relevant-content" @click="$router.push('/video/' + r.id)" v-for="(r,index) in relevant" :key="index">
        <div class="relevant-item">
          <img class="gif" v-lazy="r.pics[0].gif_url ? r.pics[0].gif_url : r.pics[0].url" />
          <div class="relevant-count">
            <div class="relevant-text">{{ r.title }}</div>
            <div class="relevant-content">{{ r.content }}</div>
          </div>
        </div>
        <div class="relevant-publisher">
          <div class="publisher">
            <img class="avatar-img" :src="r.send_user.avatar_thumbnail" />
            <div class="publisher-name">{{ r.send_user.name }}</div>
          </div>
          <div class="total-browse">
            <div class="total-fabulous">{{ r.like_count }}个赞</div>
            <div class="browse">{{ r.view_count }}次浏览</div>
          </div>
        </div>
      </div>

        </template>

      </refresh-list>
    </div>
  </div>
</template>
<script>
import axios from '@/utils/request'
import { preview } from '@/utils/preview/index.js'
import RefreshList from '@/components/activity/public-component/RefreshList.vue'
import { changeRedheart } from '@/utils/fabulous/index'

export default {
    components: {
    RefreshList
  },
  data() {
    return {
      data: [],
      relevant: [],
      count: null,
      comment: [],
        status: {
        isLoading: false,
        finished: false,
        loading: false,
      },
      page:1,
      clickFo:false,
            collection: false

    }
  },
  props: ['id'],
  created() {
    this.RequestDynamic()
     this.RequestRelevant()
      this.RequestComment()
              this.sendRequest()
   let collections = JSON.parse(localStorage.getItem('collections')) || []
    collections.some((item) => {
      if (item.id == this.id) {
        this.collection = true
        return true
      }
    })

  },
  computed: {
    date: function () {
      return function (ItemTime) {
        let date = new Date().getTime()
        let time = ItemTime * 1000
        let timeInterval = date - time
        if (timeInterval > 2592000000) {
          let mouth = new Date(time).getMonth() + 1
          let day = new Date(time).getDate()
          mouth = mouth < 10 ? '0' + mouth : mouth
          day = day < 10 ? '0' + day : day
          return mouth + '-' + day
        } else if (timeInterval < 3600000) {
          let minute = parseInt(timeInterval / 60000)
          return minute + '分钟前'
        } else {
          let beforeTime = parseInt(timeInterval / 3600000)
          if (beforeTime > 24) {
            let dayTime = parseInt(beforeTime / 24)
            return dayTime + '天前'
          }
          return beforeTime + '小时前'
        }
      }
    }
  },
  methods: {
    async RequestComment() {
      const comment = await axios.get(`/v2/posts/${this.id}/comments?page=1&limit=3`)
      this.comment.push(comment)
      // console.log(comment)
    },
    async RequestDynamic() {
      const dynamic = await axios.get(`/v2/posts/${this.id}`)
      this.data.push(dynamic)
      console.log(this.data)
    },
    goback() {
      this.$router.go(-1)
    },
    async RequestRelevant() {
      const relevant = await axios.get(`/v2/recommendation/posts?post_id=${this.id}&page=${this.page}`)
       if (relevant.length > 0) {
        this.page++
        this.relevant = [...this.relevant, ...relevant]
        this.status.isLoading = false
        this.status.loading = false
      } else {
        this.status.finished = true
      }
    },
       // 下拉刷新
    async onRefresh() {
      ;(this.data = []), (this.text = []), (this.list = []), (this.tag = []), (this.page = 1), (this.banner = []), (this.figure = []), (this.page = 1)
      await this.sendRequest()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.RequestRelevant()
      this.status.loading = false
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      await this.RequestRelevant()

      Toast.clear()
    },
    previewImg(img, index) {
      // console.log(img,"img")
      let prearr = []
      img.forEach((item) => {
        prearr.push(item.url)
      })
      preview(prearr, index)
    },
    clickFollow(){
      this.clickFo=true
      
    },
      clickflw(){
      this.clickFo=false
      
    },
     changeHeart(d) {
      let thisSet = this.$set
      changeRedheart(d, thisSet)
    },
    //收藏
    async collectionFeed() {
      /*
      收藏
      请求地址：https://api.xmonster.cn/v2/user/favorite/feeds/6364
      请求方式：put
      请求头：
      {
      authorization：Token token=7b07e3875b838c9470a46510db4c1975
      }

      取消收藏
      请求地址：https://api.xmonster.cn/v2/user/favorite/feeds/6364
      请求方式：delete
      请求头：
      {
        authorization：Token token=7b07e3875b838c9470a46510db4c1975
      }  
      */
      if (this.collection) {
        const data1 = await axios.delete('/v2/user/favorite/feeds/' + this.id, {
          headers: {
            authorization: 'Token token=7b07e3875b838c9470a46510db4c1975'
          }
        })
        if (data1.message == 'success') {
          this.collection = false
          let collections = JSON.parse(localStorage.getItem('collections')) || []
          collections = collections.filter((item) => item.id !== this.id)
          localStorage.setItem('collections', JSON.stringify(collections))
          this.$toast('取消收藏')
        }
      } else {
        const data = await axios({
          url: 'https://api.xmonster.cn/v2/user/favorite/feeds/' + this.id,
          method: 'put',
          headers: {
            authorization: 'Token token=7b07e3875b838c9470a46510db4c1975'
          }
        })
        if (data.message == 'success') {
          this.collection = true
          let collections = JSON.parse(localStorage.getItem('collections')) || []
          collections.push({
            id: this.id,
            collection: this.collection
          })
          localStorage.setItem('collections', JSON.stringify(collections))
          this.$toast('收藏成功')
        }
      }
    },
    
  }
}
</script>
<style lang="less" scoped>
.dynamic-box {
  padding-bottom: 50px;
  .search-bar {
    padding: 10px 0;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d94648;
    line-height: 22px;
    display: flex;
    height: 46px;
    align-items: center;
    z-index: 999;

    .arrow {
      width: 24px;
      height: 24px;
      margin-left: 20px;
    }

    .title {
      font-size: 18px;
      color: #fff;
      padding-left: 25px;
    }
  }

  .master-list {
    .comment {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      color: rgb(178, 178, 178);
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: white;
      z-index: 999;
      padding: 5px;
      input {
        width: 186px;
        height: 30px;
        border: 1px solid rgb(221, 221, 221);
      }
      .comment-item {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-around;

        .comment_count {
          display: flex;
          align-items: center;

          .comment_count-img {
            margin-right: 2px;

            width: 18px;
            height: 18px;
            display: block;
          }
        }
        .like_count {
          display: flex;
          align-items: center;

          .like_count-img {
            margin-right: 2px;
            width: 22px;
            height: 25px;
            display: block;
          }
        }
        .collection {
          display: flex;
          align-items: center;

          .collection-img {
            margin-right: 2px;

            width: 18px;
            height: 18px;
            display: block;
          }
        }
      }
    }

    .master-list-content {
      margin: 0 7px;
      margin-top: 10px;
      display: flex;
      align-items: center;

      .imgbox {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;

        .master-avatar_thumbnail {
          width: 40px;
          height: 40px;
          display: block;
        }
        .account_icon_url {
          position: absolute;
          left: 25px;
          top: 0;
          width: 15px;
          height: 15px;
        }

        .master-name {
          font-size: 13px;
          margin-left: 10px;
        }
      }

      .follow {
        display: flex;
        width: 50px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid red;
        border-radius: 5px;
        font-size: 13px;
        color: red;
      }

      .preferred {
        width: 40px;
        height: 35px;
        margin-right: 15px;
        display: block;
      }
    }

    .pics-box {
      width: 100%;
      display: flex;
      flex-flow: wrap;

      .pics {
        margin: 2px;
        .pics-img {
          width: 120px;
          height: 110px;
          display: block;
        }
      }
      .text-box {
        padding-top: 10px;
        margin: 0 7px;

        .title {
          font-size: 15px;
          font-weight: bold;
        }
        .content {
          margin-top: 10px;
          line-height: 18px;
          font-size: 12px;
        }
        .title-box {
          font-size: 13px;
          display: flex;
          flex-wrap: wrap;
          img {
            width: 13px;
            height: 13px;
            display: block;
            margin-right: 3px;
          }
          .title {
            border-radius: 999px;
            display: flex;
            margin-right: 5px;
            color: #469dd9;
            font-size: 12px;
            border: 1px solid;
            padding: 5px;
            margin-top: 5px;
          }
        }
        .address-box {
          display: flex;
          .address {
            display: flex;
            font-size: 14px;
            padding: 10px;
            justify-content: center;
            align-items: center;
            height: 25px;
            border: 1px solid red;
            border-radius: 999px;
            font-weight: 500;
            color: red;
            margin: 10px 0;
            .icon {
              width: 12px;
              height: 14px;
              margin-right: 5px;

              display: block;
            }
          }
        }
      }

      .shop-box {
        margin: 0 7px;
        width: 100%;

        .shop-content {
          display: flex;
          background-color: rgb(245, 245, 245);
          .shop-img {
            width: 60px;
            height: 60px;
            display: block;
          }
          .shop-item {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin-left: 5px;

            .shop-name {
              font-size: 13px;
              font-weight: bold;
            }
            .reason_text {
              font-size: 12px;
              color: rgb(178, 178, 178);
            }
            .shop-text {
              display: flex;
              font-size: 12px;
              color: rgb(178, 178, 178);

              .collection {
                margin-left: 10px;
              }
            }
          }
        }
        .browse-box {
          margin-top: 7px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: rgb(178, 178, 178);
        }
      }
    }
  }
  .comment-box {
    .pop-name {
      margin-top: 25px;
      margin-left: 5px;
      font-size: 16px;
      font-weight: bold;
    }
    .comment-content {
      .comment-text {
        margin-top: 5px;
        display: flex;
        font-size: 12px;
        width: 100%;
        height: 60px;
        align-items: center;
        border-bottom: 1px solid #ddd;
        .head-img {
          width: 30px;
          height: 30px;
          display: block;
        }
        .text-box {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          .user-name {
            color: black;
          }
          .time {
            margin-top: 10px;
          }
        }
      }
    }
    .more-comment {
      font-size: 14px;
      margin-top: 15px;
      display: flex;
      justify-content: center;
    }
  }
  .relevant-box {
    margin: 0 7px;

    .relevant-title {
      margin-top: 20px;
      font-size: 14px;
      font-weight: bold;
    }
    .relevant-content {
      border-bottom: 1px solid rgb(245, 245, 245);
      padding-bottom: 10px;

      .relevant-item {
        display: flex;
        margin-top: 20px;
        margin-bottom: 10px;

        .gif {
          width: 40%;
          height: 100px;
          display: block;
        }
        .relevant-count {
                      width: 50%;

          margin-left: 10px;

          display: flex;
          flex-direction: column;
          .relevant-text {
            font-size: 14px;
            font-weight: bold;
          }
          .relevant-content {
            margin-top: 5px;
            font-size: 12px;
            line-height: 18px;
            overflow: hidden;
            white-space: normal;
            height: 75px;
            overflow: hidden;
            text-overflow: ellipsis; /*显示为......*/
            -webkit-line-clamp: 4; /*显示为两行，在第二行中显示为.......*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .relevant-publisher {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .publisher {
        display: flex;
        align-items: center;

        .avatar-img {
          width: 20px;
          height: 20px;
          display: block;
        }
        .publisher-name {
          font-size: 13px;
          margin-left: 3px;
        }
      }
      .total-browse {
        display: flex;
        font-size: 12px;
        color: rgb(178, 178, 178);
        align-items: center;

        .browse {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
